//制定任务


const gulp=require('gulp')
//代理
 const proxy=require('http-proxy-middleware')
const htmlmin=require('gulp-htmlmin')

const cleanCss = require('gulp-clean-css')
// //低版本制定任务   gulp.task()
const autoPrefixer = require('gulp-autoprefixer')//兼容
// //制定一个html任务，把大文件里面的html取出来，压缩，放到dist目录下面
const uglify =require('gulp-uglify')
const babel =require('gulp-babel')
const del =require('del')
const sass = require('gulp-sass')
//开启服务器
const  connect = require('gulp-connect')

const delDist=()=>{
    return del(['dist'])
    }

//提前把所有文件路径做一个统一规划
const paths={
    html:{
        src:'src/**/*.html',
        dest:'dist'
    },
    css:{
        src:'src/css/**/*.scss',
        dest:'dist/css'
    },
    js:{
        src:'src/js/**/*.js',
        dest:'dist/js'
    },
    img: {
        src: 'src/images/**/*',
        dest: 'dist/images'
    },
    libs:{
        src:'src/libs/**/*',
        dest:'dist/libs'
    }
  
    // ico:{
    //     src:'src/favicon.ico',
    //     dest:'dist/favicon.ico'
    // }
}


const html =()=>{
    
    //** 所欲文件夹
    //*所有html文件
    //取出3文件下的所有文件夹的所有html
//   return  gulp.src('3/**/*.html')
return  gulp.src(paths.html.src)
    //管道html
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS 
    }))
    //终点在dist目录里面
    .pipe(gulp.dest(paths.html.dest))
    //热更新
    .pipe(connect.reload())
}

// css任务
const css =()=>{
    return gulp.src(paths.css.src)
    //编译
.pipe(sass())
//加前缀兼容
    .pipe(autoPrefixer(
    //     {
    //     overrideBrowserslist: ['last 2 versions']
    // }

)

)
//压缩
    .pipe(cleanCss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}


const js =()=>{
    return gulp.src(paths.js.src)
    .pipe(babel({
        presets: ['@babel/env']
    }))
   .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}
const img =()=>{
    return gulp.src(paths.img.src)
   

    .pipe(gulp.dest(paths.img.dest))
    
}


//所有libs文件放paths.img.dest
const libs =()=>{
    return gulp.src(paths.libs.src)
   

    .pipe(gulp.dest(paths.libs.dest))
}

const server=()=>{
connect.server({
    port:2333,
    root:'dist',
    //支持自动重启功能
    livereload:true,
    //中间件
    //代理
    middleware: function(connect,opt){
return[
proxy('/api',{
    target:'http://localhost:80',
    changeOrigin:true

})
]
    }
})
}

//制定一个icon任务  箭头函数一句  return 大括号可以省略

const ico = ()=>gulp.src('src/favicon.ico').pipe(gulp.dest('dist'))


// //监听，自动启动


const watch = () => {
    gulp.watch(paths.html.src, html)
    gulp.watch(paths.css.src, css)
    gulp.watch(paths.js.src, js)
}
// module.exports={
//     html,
//      css,
//     js,
//     img,
//     libs,
//     del
//     // watch
// }
//series同步 第一个结束了，才嫩第二行
// parallel 异步 
//
module.exports.default=gulp.series(delDist,gulp.parallel(html,js,css,img,ico,libs,server,watch))


